
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
		<title>图片上传</title>

		<link rel="stylesheet" type="text/css" href="../plugins/layer/need/layer.css" />
		<link rel="stylesheet" type="text/css" href="../plugins/upFile/cropper/dist/cropper.css" />
		<link rel="stylesheet" type="text/css" href="../plugins/upFile/cropper/css/main.css"/>
		<link rel="stylesheet" type="text/css" href="../plugins/upFile/upImg.css"/>
		<script type="text/javascript" src="../plugins/jquery-1.11.1.min.js"></script>
  		<script type="text/javascript" src="../js/tool/common.js"></script>
		<script type='text/javascript' src='../plugins/upFile/upImg/js/LocalResizeIMG.js'></script>
		<script type='text/javascript' src='../plugins/upFile/upImg/js/patch/mobileBUGFix.mini.js'></script>
		
		<script type="text/javascript" src="../plugins/upFile/cropper/dist/cropper.js"></script>
		<script type="text/javascript" src="../plugins/upFile/upImg.js"></script>
		<script type="text/javascript" src="../plugins/layer/layer.js"></script>

        <style type="text/css">
            .account_div {
                width: 90%;
                height: 30px;
                margin: 20px auto;
            }
            .account_div input {
                height: 30px;
            }

            .img_content {
                width: 100%;
                overflow: auto;
            }

            .img_content .img_item {
                width: 46px;
                height: 46px;
                float: left;
                margin-right: 10px; 
                margin-top: 5px;
                position: relative;
            }

            .sure_btn { 
                width: 80%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #159ee2;
                color: #fff;
                font-size: 16px;
                margin: 20px auto;
            }
        </style>
	</head>
	<body style="background: #eee;">
        <div class="account_div">
            <span>淘宝帐号</span>
            <input id="account" type="text" />
        </div>
        <div id="img_content" class="img_content">
            <!-- <div class="img_item upImg_flag_test">
                <div class="img_delete"></div>
            </div> -->

            <div id="img_head_pic" class="upImg_flag" style=" float: left;">
                <input type="file" id="uploadphoto" class="upImg_btn" />
            </div>
        </div>

        <div class="sure_btn" onclick="save()">保存</div>
        
		
	</body>
	
	<script type="text/javascript">
    	var upImg = upImgItem.init('uploadphoto');
        var index = 0;

        $('#img_head_pic').on('change',function() {
            layer.open({shadeClose: false,type: 2});
            upImg.show(
                {url: urlfile + "coreAttachment/bgj/upload/stream",
                param:{account: $('#account').val(),cratmType: 1,cratmDir:"jgj/bgj",fileName:"head.png"}},
                function(returnImagData, ajaxResult) {//图片数据， 上传图片后返回的ajax数据
                	// upImgItem.hide();
                    index++;
                    var img_item =  '<div id="img_'+index+'" class="img_item">' +
                                        '<div class="img_delete" onclick="deleteImg('+index+')"></div>' +
                                    '</div>';
                    $('#img_content').prepend(img_item);


                    $('#img_'+index).css({
                        'background':'url("'+returnImagData+'")',
                        '-webkit-background-size': '46px 46px',
                        'background-size': '46px 46px'
                    });

                    $('#img_'+index).attr("data-uuid", ajaxResult.data); 
                    upImgItem.hide();  
                }
            );
        })


        function deleteImg(id) {
            $('#img_'+id).remove();
        }

        function save() {
            var account = $('#account').val();
            if(!account) {
                alert("淘宝帐号不能为空！");
                return;
            }

            var imgs = $('.img_item');
            if(imgs.length==0) {
                alert("至少上传一张图片");
                return;
            }


            var imgs = $('.img_item');
            var uuids = "";
            for(var i=0; i<imgs.length; i++) {
                uuids += imgs.eq(i).attr("data-uuid");
            }

            var data= "&crtpcAccount=" + $('#account').val() + "&crtpcFile="+uuids;

            var url = urlfile + "coreTaobaoPic/add/coreTaobaoPic";
            ajaxTool("post",data,url,
                function error(XMLHttpRequest, textStatus, errorThrown,fnErr){
                    alert("error:" + XMLHttpRequest);
                },
                function success(data){
                    if(!data.success) {
                        alert(data.errMsg);
                    }else{
                        refreshPage();
                    }
                }
            );
        }
	</script>
</html>